<template>
	<view class="">
		<NavBar title="消息" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<scroll-view scroll-y="true" :style="{height: contentHeight}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list">
					<view class="">
						<view class="main_item m_b_22" v-for="(item,index) in msgList">
							<view class="m_b_4">
								<text class="f_30_0_b">
									{{item.typeName}}
								</text>
							</view>
							<view class="flex_both">
								<view class="">
									<view class="">
										<text class="f_22_0" style="color: #979696;">
											{{item.create_time}}
										</text>
									</view>
									<view class="">
										<text class="f_24_0" style="color: #979696;">
											{{item.name}} {{item.ref_desc}}
										</text>
									</view>
								</view>
								<view class="" v-if="item.type == 2">
									<view class="main_item_btn" @click="showModal(index)" v-if="!item.deal_status">
										<text class="f_24_f">
											同意
										</text>
									</view>
									<view class="main_item_btn2" v-else>
										<text class="f_24_f" style="color: #979696;">
											已同意
										</text>
									</view>
								</view>
								<view class="" v-else>
									<text class="f_24_0" style="color: #979696;" v-if="item.is_read">
										已读
									</text>
									<text class="f_24_0" style="color: #FE450C;" v-else>
										未读
									</text>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&msgList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box m_t_32 " style="padding-bottom: 32rpx;" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
		<up-modal :show="modalShow" title="提示" content='确定要同意该店的绑定申请吗?' :showCancelButton="true" confirmColor="#FA5A28"
			@confirm="onModalOk" @cancel="onModalCancel"></up-modal>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76}rpx)`
			}
		});
		getMsgList()
	})
	// 审核消息列表
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		if (loadShow.value) return
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			getMsgList()
		}, 1000)
	}
	// 评价列表 取前两条
	const msgList = ref([])
	const getMsgList = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('my.getMsgList', { page: page.value })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				msgList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
	// 
	const modalShow = ref(false)
	const activeIdx = ref()
	const showModal = (e) => {
		activeIdx.value = e
		modalShow.value = true
	}
	const onModalOk = () => {
		modalShow.value = false
		msgDeal()
	}
	const onModalCancel = () => {
		modalShow.value = false
	}
	// 同意绑定分店
	const msgDeal = async () => {
		let res = await proxy.$http('my.msgDeal', { msg_id: msgList.value[activeIdx.value].msg_id })
		if (res.code == 1) {
			uni.$u.toast('绑定成功')
			setTimeout(() => {
				loadMessage.value = "加载中"
				page.value = 1
				msgList.value = []
				getMsgList()
			})
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_list {
				.main_item {
					padding: 24rpx 28rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 10rpx;

					.main_item_btn {
						width: 152rpx;
						height: 57rpx;
						background: #F93E19;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.main_item_btn2 {
						width: 152rpx;
						height: 57rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						border: 1px solid #8F8F8F;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>